<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>Milestones</title>
<meta name="cloudcaptive" content=
"CloudCaptive.com UserInfuser">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
type="text/javascript">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript">
</script>
<script type="text/javascript" src="/js/jquery.progressbar.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
  {% if badges %}
    {% for badge in badges %}
      {% if badge.pointsRequired %}
         var percent = 0;
         if({{badge.pointsEarned}} >= {{badge.pointsRequired}}){
           percent = 100;
         }
         else{
           percent = parseInt({{badge.pointsEarned}}/{{badge.pointsRequired}} * 100);
         }
         $("#{{ badge.id }}-badge").progressBar(percent, {max:100, showText: false, textFormat: 'fraction', barImage: {
		0:  '/images/progressbg_red.gif',
		30: '/images/progressbg_orange.gif',
		70: '/images/progressbg_green.gif'
	        },
      	           boxImage		: '/images/progressbar.gif',
                });
         if (percent == 0){
           percent = "Locked"; 
         }
         else if (percent == 100){
           percent = "Unlocked";
         }
         else{
           percent = percent.toString() + "%";
         }
         $("#{{ badge.id }}-percentage").html(percent);
      {% else %}
        {% if badge.awarded %}
          $("#{{ badge.id }}-badge").progressBar(1, {max:1, showText: false, barImage: {
		0:  '/images/progressbg_red.gif',
		1: '/images/progressbg_green.gif'
	},	boxImage		: '/images/progressbar.gif',
        });
           $("#{{ badge.id }}-percentage").html("Unlocked");
        {% else %}
          $("#{{ badge.id }}-badge").progressBar(0, {max:1, showText: false, barImage: {
		0:  '/images/progressbg_red.gif',
		1: '/images/progressbg_green.gif'
	},	boxImage		: '/images/progressbar.gif',
        });
           $("#{{ badge.id }}-percentage").html("Locked");
        {% endif %}
      {% endif %}
    {% endfor %}
  {% endif %}
  });
</script>
</head>
<body>
<div style="background-color:{{backgroundColor}}; visibility: visible; 
{% if hasRoundedCorners %}
border-radius: 10px 10px 10px 10px;
{% endif %}
border:{{borderThickness}}px {{borderStyle}} {{borderColor}}; height:{{height}}px; width:{{width}}px; overflow:auto; ">
  {% if displayTitle %}
    <div style="background-color:{{titleBackgroundColor}}; font-family:{{titleFont}}; font-size:{{titleSize}}px; text-align:{{titleFloat}}; color:{{titleColor}}; padding:3px;">{{ title }}</div>
  {% endif %}
  {% if badges %}
    {% for badge in badges %}
        <div style="padding:10px; float:left;">
          {% if badge.resource %}
            <a href="{{ badge.resource }}" target="_blank">
          {% endif %}
            <img height="{{imageSize}}" width="{{imageSize}}" src="{{badge.downloadLink}}" alt="{{badge.reason}}">
          {% if badge.resource %}
            </a>
          {% endif %}
          {% if displayReason %}
            <span style="display:block; font-family:{{reasonFont}}; font-size:{{reasonSize}}px; text-align:{{reasonFloat}}; color:{{reasonColor}}; float:{{reasonFloat}};">
              {{badge.reason}}
            </span>
          {% endif %}
          {% if displayDate %}
            <span style="display:block; font-family:{{dateFont}}; font-size:{{dateSize}}px; text-align:{{dateFloat}}; color:{{dateColor}};">
              {{badge.awardDate}}
            </span>
          {% endif %}

          <span id="{{badge.id}}-badge" style="display:block;">
          </span>
          <span id="{{badge.id}}-percentage" style="display:block; font-family:{{reasonFont}}; font-size:{{reasonSize}}px; text-align:{{reasonFloat}}; color:{{reasonColor}}; float:{{reasonFloat}};">
          </span>
        </div>
    {% endfor %}
  {% else  %}
    {% if displayNoBadgesMessage %}
      <div style="display:block; font-family:{{noBadgesFont}}; font-size:{{noBadgesSize}}px; text-align:{{noBadgesFloat}}; color:{{noBadgesColor}};">
        {{noBadgesMessage}}
      </div>
    {% endif %}
  {% endif %}
</div>
</body>
